<!-- 商品页面 -->
<script setup>
import { computed, provide, ref, watch } from "vue";
import {
  NBreadcrumb,
  NBreadcrumbItem,
  NSkeleton,
  NButton,
  NTabs,
  NTabPane,
  NSpin,
  useMessage,
} from "naive-ui";
import { findGoods } from "@/api/product";
import { useRoute } from "vue-router";
import store from "@/store";
const message = useMessage();
let btnLoading = ref(false);
const loading = ref(false);
const route = useRoute();
const product = ref(null);
const skuId = ref(null);
// 商品数量
let count = ref(1);

watch(
  () => route.params.id,
  (newVal) => {
    if (newVal && `/product/${newVal}` === route.path) {
      product.value = null;
      loading.value = true;
      // 获取商品详情 进行渲染
      findGoods(route.params.id).then((res) => {
        product.value = res;
        product.value.skus.forEach((element) => {
          if (element.id !== 0) {
            skuId.value = element.id;
            product.value.price = element.price;
            product.value.oldPrice = element.oldPrice;
            product.value.inventory = element.inventory;
            return;
          }
        });
        loading.value = false;
      });
    }
  },
  {
    immediate: true,
  }
);

const currSku = ref(null);

const changeSku = (sku) => {
  if (sku.skuId) {
    product.value.price = sku.price;
    product.value.oldPrice = sku.oldPrice;
    product.value.inventory = sku.inventory;
  }
  // 记录选择后的sku
  currSku.value = sku;
};

// 提供goods数据给后代组件使用
provide("goods", product);

const insertCart = () => {
  const { skuId, spacsText, inventory } = currSku.value;
  const { id, name, price, mainPictures } = product.value;
  if (currSku.value && currSku.value.skuId) {
    btnLoading.value = true;
    store
      .dispatch("insertCart", {
        skuId: skuId,
        attrsText: spacsText,
        stock: inventory,
        id,
        name,
        price,
        nowPrice: price,
        picture: mainPictures[0],
        selected: true,
        isEffective: true,
        count: count.value,
      })
      .then(() => {
        btnLoading.value = false;
        message.success(" 加入购物车完成 ");
      });
  } else {
    message.warning(" 请选择完整商品规格 ");
  }
};
</script>

<template>
  <div class="goods-page bg">
    <div class="container">
      <transition>
        <n-breadcrumb style="padding: 20px 0px" v-if="product">
          <n-breadcrumb-item href="/">首页</n-breadcrumb-item>
          <n-breadcrumb-item :href="`/category/${product.categories[1].id}`">{{
            product.categories[1].name
          }}</n-breadcrumb-item>
          <n-breadcrumb-item
            :href="`/category/sub/${product.categories[1].id}`"
            >{{ product.categories[0].name }}</n-breadcrumb-item
          >
          <n-breadcrumb-item>{{ product.name }}</n-breadcrumb-item>
        </n-breadcrumb>
      </transition>
      <!-- 商品信息 -->
      <transition>
        <n-spin :show="loading">
          <div v-if="!product">
            <n-skeleton height="600px" width="1240px" />
          </div>
          <div class="goods-info" v-else>
            <div class="media">
              <goods-image :images="product.mainPictures"></goods-image>
              <goods-sales></goods-sales>
            </div>
            <div class="spec">
              <goods-name :goods="product"></goods-name>
              <goods-sku
                :goods="product"
                :skuId="skuId"
                @change="changeSku"
              ></goods-sku>
              <num-box
                v-model="count"
                label="数量"
                :max="product.inventory"
              ></num-box>
              <div class="btn">
                <n-button
                  type="primary"
                  :loading="btnLoading"
                  size="medium"
                  @click="insertCart()"
                >
                  加入购物车
                </n-button>
              </div>
            </div>
          </div>
        </n-spin>
      </transition>
      <!-- 商品推荐 -->
      <div v-if="product">
        <goods-relevant></goods-relevant>
      </div>
      <!-- 商品详情 -->
      <div class="goods-footer" v-if="product">
        <div class="goods-article">
          <!-- 商品+评价 -->
          <div class="goods-tabs">
            <div class="badge">( {{ product.commentCount }} )</div>
            <n-tabs type="line" size="large">
              <n-tab-pane name="detail" tab=" 商品详情 ">
                <goods-detail></goods-detail>
              </n-tab-pane>
              <n-tab-pane name="comment" tab=" 商品评价 ">
                <goods-comment></goods-comment>
              </n-tab-pane>
            </n-tabs>
          </div>
          <!-- 注意事项 -->
          <div class="goods-warn">
            <goods-warn></goods-warn>
          </div>
        </div>
        <!-- 24热榜+专题推荐 -->
        <div class="goods-aside">
          <goods-hot></goods-hot>
          <goods-hot :type="2"></goods-hot>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.badge {
  position: absolute;
  left: 192px;
  top: 34px;
  font-size: 15px;
  z-index: 999;
  color: @priceColor;
}
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}

.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}
.goods-tabs {
  position: relative;
  // min-height: 600px;
  background: #fff;
  padding: 20px;
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}
.btn {
  margin: 20px 0px 0px 20px;
}
</style>